import type { ButtonProps } from "antd";
import { Button, Modal } from "antd";
import { useTranslation } from "react-i18next";
import { ExclamationCircleOutlined, DeleteOutlined } from "@ant-design/icons";

interface Props extends ButtonProps {
    isLoading?: boolean;
    name?: string;
    isIcon?: boolean;
    handleDelete: () => void;
}

function DeleteBtn(props: Props) {
    const { isLoading, loading, isIcon, name, handleDelete } = props;
    const { t } = useTranslation();
    const [modal, contextHolder] = Modal.useModal();

    // 清除自定义属性
    const params: Partial<Props> = { ...props };
    delete params.isIcon;
    delete params.isLoading;
    delete params.handleDelete;

    const showConfirm = () => {
        modal.confirm({
            title: t("public.kindTips"),
            icon: <ExclamationCircleOutlined />,
            content: t("public.confirmMessage", { name: name || t("public.delete") }),
            okText: t("public.confirm"),
            okType: "danger",
            cancelText: t("public.cancel"),
            onOk() {
                handleDelete();
            },
        });
    };

    return (
        <>
            <Button
                danger
                type="primary"
                {...params}
                icon={params?.icon || (isIcon && <DeleteOutlined />)}
                loading={!!isLoading || loading}
                onClick={showConfirm}
            >
                {name || "删除"}
            </Button>
            {contextHolder}
        </>
    );
}

export default DeleteBtn;
